/**
* 头部菜单
*/ 
<template>
  <el-menu
    class="el-menu-demo flex-align-center"
    mode="horizontal"
    background-color="#fff"
    text-color="#333"
    active-text-color="#333">
    <div class="logobox">
      <img class="logoimg" :src="logo || defaultLogo" alt="" />
      <!-- <p v-else>医院logo</p> -->
    </div>
    <!-- <i class="f22 ml16"
      :class="{
        'el-icon-s-fold': !collapsed,
        'el-icon-s-unfold': collapsed,
      }"
      style="cursor: pointer"
      @click="toggle(collapsed)"></i> -->
    <span class="header_title flex-1 f-22">科研项目管理系统</span>
    <div class="flex f-14 mr32 fb" v-if="!adminShow">
      <p class="mr16"><i class="el-icon-user-solid"></i> 工号：<span class="c-blue">{{userInfo.code}}</span></p>
      <p class="mr16">所属科室：<span class="c-blue">{{userInfo.department}}</span></p>
      <p >所属角色：<span class="c-blue">{{userInfo.role}}</span></p>
    </div>
    <el-dropdown>
        <div class="avatar-warp">
          <p>欢迎：<span class="c-blue">{{userInfo.name}}</span>！</p>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="goLink(1)">个人中心</el-dropdown-item>
          <el-dropdown-item @click.native="goLink(2)" v-if="!adminShow">个人资料</el-dropdown-item>
          <el-dropdown-item @click.native="logout">用户退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
  </el-menu>
</template>
<script>
import { mapMutations, mapState } from "vuex";
import {Apilogout} from '@/api'
import {adminShow} from '@/utils/index.js'
export default {
  name: "navcon",
  data() {
    return {
      defaultLogo: require("@/assets/img/logo.png"),
      adminShow:adminShow(),
    };
  },
  computed: {
    ...mapState(["collapsed",'userInfo','logo']),
  },

  methods: {
    ...mapMutations(["changeCollapsed",'claerInfo']),
    // 切换显示
    goLink(i){
      switch (i) {
        case 1: this.$router.push('/personal/password');break;
        case 2: this.$router.push('/personal/data');break;
      }
    },
    toggle(showtype) {
      this.changeCollapsed(!showtype);
    },
    content() {
      //个人中心
      this.$router.push('/User/center')
    },
    logout() {
      //退出
      Apilogout().then(res => {
        sessionStorage.clear()
        // this.claerInfo()
        // this.$router.push('/login')
        location.reload()
      })

    },
  },
};
</script>
<style lang='less'>
.el-menu-demo {
  height: 60px;
  // padding-bottom: 10px;
  .logobox {
    width: 240px;
    height: 60px;
    text-align: center;
    position: relative;
    .logoimg {
      // max-width: 80%;
      // max-height: 100%;
      width: 200px;
      height: 40px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    border: none;
  }
  .buttonimg {
    height: 60px;
    background-color: transparent;
    border: none;
  }
  .showimg {
    width: 26px;
    height: 26px;
  }
  .el-submenu__title {
    border-bottom: none !important;
  }
  .header_title{
    color: #333;
    margin-left: 8px;
    font-weight: bold;
  }
  .avatar-warp{
    display: flex;
    align-items: center;
  }
}

</style>